<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="js.js" type="text/javascript"></script>
        <script src="data/port.js" type="text/javascript"></script>
        <script src="data/devicepath.js" type="text/javascript"></script>
        <script src="data/portpath.js" type="text/javascript"></script>
    </head>
    <style type="text/css">
        body{background: #517470}
        canvas{background: #517470}
    </style>
    <script type="text/javascript">
        var canvas = null;//保存画布.

        var unit_id = 5;//要画出的设备号
        var dataStep1 = ports;//上线后使用ajax获取
        var dataStep2 = devicepaths;//上线后使用ajax获取
        var dataStep3 = portpaths;//上线后使用ajax获取

        var switchObject= null;//保存当前交换机设备信息
        var deviceDics = new Array();//保存设备id=>device
        var connectLines = new Array();//保存连接线

        function pageLoad(){
            var can = $$('canvas');
            canvas = can.getContext('2d');
            can.width = window.innerWidth - 60;
            can.height = window.innerHeight - 60;
            //传入canvas对象，与事件坐标参数
            var windowToCanvas = function(canvas, x, y){
                var bbox;
                bbox = canvas.getBoundingClientRect();
                return {
                    x: (x - bbox.left) * (canvas.width / bbox.width),
                    y: (y - bbox.top) * (canvas.height / bbox.height)
                };
            };
            $$('canvas').onclick = function(){
                var point = windowToCanvas(this, event.clientX, event.clientY);
                var port = switchObject.getPortByPoint(point.x, point.y);
                if(port != null){
                    alert("UNIT_ID:" + port.UNIT_ID + ",PORT_ID:" + port.PORT_ID + ",TYPE:" + port.TYPE);
                    console.log(port);
                }
            };
            //创建当前交换机
            switchObject = Switch.createNew(unit_id, '#未知#');
            for(var k in dataStep2.list){
                var d = dataStep2.list[k];
                if(d.UNIT_ID == unit_id){
                    switchObject.name = d.UNIT_DESC;
                    switchObject.UNIT_ID = d.UNIT_ID;
                    switchObject.UNIT_CLASS = d.UNIT_CLASS;
                    switchObject.UNIT_DESC = d.UNIT_DESC;
                    break;
                }
            }
            switchObject.initPort(dataStep1);
            parsePath();
            switchObject.addConnectDevice(connectLines);
            
            if(can.width < switchObject.getTotalWidth()){
                can.width = switchObject.getTotalWidth() + 100;
            }
            if(can.height < switchObject.getTotalHeight()){
                can.height = switchObject.getTotalHeight() + 100;
            }
            
            switchObject.x = (can.width - switchObject.getTotalWidth()) / 2 + (Switch.arrowLength + Device.width + Port.width);
            switchObject.y = (can.height - switchObject.getTotalHeight()) / 2;

            
            //画出主交换机
            switchObject.draw(canvas);
            


            // var i = 0;
            // for(var k in deviceDics){
            //     var d = deviceDics[k];
            //     d.x = i * 200;
            //     d.y = 200;
            //     i++;
            //     d.draw(canvas);
            // }


            // s = Switch.createNew(1,"test第三个点（以第二个点为起点)");
            // s.x = 520;
            // s.y = 950;
            // var p1 = Port.createNew(1,"s1");
            // s.addPort(p1);
            // p2 = Port.createNew(2,"s2");
            // s.addPort(p2);
            // p = Port.createNew(3,"s3");
            // s.addPort(p);
            // p = Port.createNew(4,"s4");
            // s.addPort(p);
            // p = Port.createNew(5,"s5");
            // s.addPort(p);
            // p = Port.createNew(6,"第三个点以第二");
            // s.addPort(p);
            // s.draw(canvas);

            // var d = Device.createNew(2,"第三个点以第二第三个点以第二)");
            // d.x = 1020;
            // d.y = 50 + Switch.headerHeight;
            // var dp = Port.createNew(1,"s1");
            // d.addLeftPort(dp);
            // d.draw(canvas);
            
            // var p = Path.createNew(1, dp, p2, 'sv')
            // p.draw(canvas);

            // d = Device.createNew(4,"第三个点以第二第三个点以第二)");
            // d.x = 10;
            // d.y = 50 + Switch.headerHeight;
            // dp = Port.createNew(2,"s1");
            // d.addRightPort(dp);
            // d.draw(canvas);
            
            // p = Path.createNew(1, dp, p1, 'go')
            // p.draw(canvas);

            // p = Path.createNew(1,  p1, dp, 'sv')
            // p.draw(canvas);

        }
        function parsePath(){
            //设备分类
            var deviceTypes = new Array();
            for(var i=0;i<dataStep2.list.length;i++){
                var d = dataStep2.list[i];
                if(!deviceTypes.hasOwnProperty(d.TYPE)){
                    deviceTypes[d.TYPE] = new Array();
                }
                deviceTypes[d.TYPE].push(d);
            }
            //根据PATH_ID和设备TYPE获取各路径
            var paths = new Array();
            for(var key in deviceTypes){
                for(var i =0; i < deviceTypes[key].length; i++){
                    var d = deviceTypes[key][i];
                    var pathKey = d.TYPE + d.PATH_ID;
                    if(!paths.hasOwnProperty(pathKey)){
                        paths[pathKey] = new Array();
                    }
                    paths[pathKey].push(d);
                }
            }
            //对每条路径，根据PORT_INDEX排序
            for(var k in paths){
                paths[k].sort(PortPathAscSort);
            }
            //遍历路径，生成与当前设备连接的连接线
            for(var k in paths){
                var path = paths[k];
                var preDevice = null;
                for(var i = 0;i<path.length;i++){
                    curDevice = path[i];
                    if(preDevice == null){
                        //当前是第一个设备，跳过
                        preDevice = curDevice;
                        continue;
                    }
                    if(curDevice.UNIT_ID == unit_id){
                        if(preDevice.UNIT_ID == unit_id){
                            //设备内部连接，不画出，跳过
                        }else{
                            //外部设备连向我
                            var liner = {
                                port_start:preDevice,
                                type:curDevice.TYPE,
                                port_end:curDevice
                            };
                            connectLines.push(liner);
                        }
                    }else{
                        if(preDevice.UNIT_ID == unit_id){
                            //我连向外部
                            var liner = {
                                port_start:curDevice,
                                type:preDevice.TYPE,
                                port_end:preDevice,
                            };
                            connectLines.push(liner);
                        }
                    }
                    preDevice = curDevice;
                }
            }
            //根据第三步数据补充路径
            for(var k in dataStep3.list){
                var c = dataStep3.list[k];
                var liner = {
                    port_start:{
                        "PORT_DIRECTION": c.PORT1_DIRECTION,
                        "PORT_ID": c.PORT1_ID,
                        "PORT_NAME": c.PORT1_NAME,
                        "PORT_PLUG": c.PORT1_PLUG,
                        "UNIT_CLASS": c.UNIT1_CLASS,
                        "UNIT_DESC": c.UNIT1_DESC,
                        "UNIT_ID": c.UNIT1_ID,
                        "UNIT_IED": "",
                    },
                    type:c.TYPE,
                    port_end:{
                        "PORT_DIRECTION": c.PORT2_DIRECTION,
                        "PORT_ID": c.PORT2_ID,
                        "PORT_NAME": c.PORT2_NAME,
                        "PORT_PLUG": c.PORT2_PLUG,
                        "UNIT_CLASS": c.UNIT2_CLASS,
                        "UNIT_DESC": c.UNIT2_DESC,
                        "UNIT_ID": c.UNIT2_ID,
                        "UNIT_IED": "",
                    },
                };
                connectLines.push(liner);
            }
        }
        function PortPathAscSort(a,b)
        {
            return a.PORT_INDEX - b.PORT_INDEX;
        }
        function PortAscSort(a,b)
        {
            if( a.NAME > b.NAME){
                return 1;
            }
            if( a.NAME < b.NAME){
                return -1;
            }
            return 0;
        }
        //*   判断在数组中是否含有给定的一个变量值
        //*   参数：
        //*   obj：需要查询的值
        //*    a：被查询的数组
        //*   在a中查询obj是否存在，如果找到返回true，否则返回false。
        //*   此函数只能对字符和数字有效
        function contains(list, obj) {
            for (var i = 0; i < list.length; i++) {
                if (list[i] === obj) {
                    return true;
                }
            }
            return false;
        }
        function $$(id){
            return document.getElementById(id);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="canvas" width="400px" height="300px">4</canvas>
    </body>
</html>